<template>
  <div>
    <n-card :bordered="false" class="mt-4" content-class="p-0">
      <p-table
        ref="tableRef"
        :item="formParams"
        :columns="columns"
        @load="load"
        @save="save"
        @delete="del"
      >
        <template #toolbar>
          <n-button type="primary" @click="() => console.log('start')"
            >启动</n-button
          >
          <n-button type="success" @click="() => console.log('stop')"
            >停止</n-button
          >
        </template>
        <template #addModal>
          <n-form
            label-placement="left"
            :model="formParams"
            :rules="rules"
            :label-width="80"
          >
            <n-form-item label="名称" path="name">
              <n-input
                placeholder="请输入名称"
                v-model:value="formParams.name"
              />
            </n-form-item>
          </n-form>
        </template>
        <template #editModal>
          <n-form
            ref="editForm"
            label-placement="left"
            :model="formParams"
            :rules="rules"
            :label-width="80"
          >
            <n-form-item label="名称" path="name">
              <n-input
                placeholder="请输入名称"
                v-model:value="formParams.name"
              />
            </n-form-item>
          </n-form>
        </template>
      </p-table>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PTable } from "components/index";
import type { DataTableMethods } from "components/index";

const tableRef = ref<DataTableMethods>();
const formParams = ref({} as { id: number; name: string });

const rules = {
  name: {
    required: true,
    message: "请输入名称",
    trigger: "blur",
  },
};

const columns = [
  { title: "ID", key: "id" },
  { title: "名称", key: "name" },
];

const save = async (id?: string | number) => {
  console.log(id);
  console.log(formParams);
  return true;
};

const del = async (rows: any[]) => {
  console.log(rows);
  return true;
};

const load = (page: number, pageSize: number) => {
  const list = [] as any[];
  console.log(page);
  for (let i = 0; i < pageSize; i++) {
    list.push({
      id: i,
      name: `name${i}`,
      age: i,
      sex: i % 2 === 0 ? "男" : "女",
      address: `address${i}`,
    } as never);
  }
  return Promise.resolve({ data: list, total: 100 });
};
</script>

<style lang="less" scoped></style>
